<template>
  <div class="goods list-init">
    <div class="address-name">车货信息</div>
    <div class="detail-init">
      <van-row>
        <van-col span="5">车辆</van-col>
        <van-col span="19">
          {{ detailList.vehicleTypeDesc }}
          <span class="line"></span>
          {{ detailList.vehicleLongDesc }}米
        </van-col>
      </van-row>
      <van-row>
        <van-col span="5">货物</van-col>
        <van-col span="19">
          {{ detailList.goodsTypeDesc }}
          <span class="line"></span>
          {{
            Number(detailList.dataType) === Number(DataTypeEm.ORDER.value)
              ? `${detailList.quality}吨`
              : detailList.settleType === SettleTypeEm.Trip.value
              ? `${detailList.quality}吨`
              : `${detailList.carryQuality}吨`
          }}
        </van-col>
      </van-row>
      <van-row>
        <van-col span="5">备注</van-col>
        <van-col span="19" class="remarks">{{ detailList.remark }}</van-col>
      </van-row>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, reactive, toRefs, watch } from 'vue'
import { DataTypeEm, SettleTypeEm } from '../utils/enums'
export default defineComponent({
  props: {
    detailList: {
      type: Object as PropType<any>
    }
  },
  setup(props) {
    const state = reactive<{ detailList: any }>({
      detailList: {}
    })

    watch(
      () => props.detailList,
      value => {
        state.detailList = value
      }
    )

    return {
      ...toRefs(state),
      DataTypeEm,
      SettleTypeEm
    }
  }
})
</script>

<style lang="scss" scoped>
@import '../css/common.scss';
.goods {
  .line {
    width: 1px;
    height: 14px;
    display: inline-block;
    background-color: $color-text-secondary;
    vertical-align: middle;
    margin: 0 10px;
  }
}
</style>
